<template>
  <div class="home">
    <div class="avatar">
      <span class="imgBox"></span>
      <span class="avatar_title">昵称</span>
    </div>

    <van-cell-group style="marginBottom:45px">
      <van-cell title-class='title_class' size="large" title="扫码录入" is-link @click="scanPhoto">
        <i slot="icon" class="iconfont iconColor icon-saoyisao1"></i> </van-cell>
      <van-cell title-class='title_class' size="large" title="拍照录入" is-link @click="$refs.file.click()">
        <i slot="icon" class="iconfont iconColor icon-paizhao"></i>
      </van-cell>
      <van-cell title-class='title_class' size="large" title="手动录入" is-link @click="editEntry">
        <i slot="icon" class="iconfont iconColor icon-shouxieqianming"></i>
      </van-cell>
    </van-cell-group>


    <van-cell-group>
      <van-cell title-class='title_class' icon="setting-o" size="large" title="擅长" is-link to="/setting"></van-cell>
      <van-cell title-class='title_class' size="large" title="电梯规划" is-link to="/elevator">
        <i slot="icon" class="iconfont icon-elevator"></i>
      </van-cell>
    </van-cell-group>


    <input ref="file" style="display:none" type="file" class="input" accept="image/jpg, image/jpeg,image/png"
      capture="camera" @change="photoChange">

    <van-popup v-model="show" round position="bottom" :style="{ height: '450px' }" closeable>
      <div class="cell_group">
        <van-cell-group>
          <van-field label="姓名" v-model="user.name" :readonly="readonly" />
          <van-field label="住院号" v-model="user.hospitalizationId" :readonly="readonly" />
          <van-field label="病床" v-model="user.bed" :readonly="readonly" />
          <van-field label="项目" v-model="user.project" :readonly="readonly" />
        </van-cell-group>
      </div>
      <p class="footerBtn" v-if="!readonly">
        <van-button plain hairline type="primary" @click="submit" size="large" round>提交</van-button>
      </p>
    </van-popup>

  </div>
</template>

<script>
  // @ is an alias to /src

  export default {
    name: 'Home',
    data() {
      return {
        show: false,
        readonly: true,
        user: {
          name: '',
          hospitalizationId: '',
          bed: "",
          project: ""
        },
        loading: true,
      }
    },
    methods: {
      scanPhoto() {
        this.user = {
          name: '张三',
          hospitalizationId: '20211008',
          bed: "F14 T3床",
          project: "胸水"
        }
        this.readonly = true
        this.show = true
        this.$nextTick(() => {
          this.$notify({
            type: 'success',
            message: '已成功录入'
          });
        })
      },
      photoChange(e) {
        console.log(e.target.files[0])
        this.$toast.loading({
          message: '识别中...',
          forbidClick: true,
        });

        setTimeout(() => {
          this.$toast.clear()
          this.user = {
            name: 'xxxxx',
            hospitalizationId: 'xxxxxx',
            bed: "xxxxx",
            project: "xxxxx"
          }
          this.readonly = true
          this.show = true
          this.$nextTick(() => {
            this.$notify({
              type: 'success',
              message: '已成功录入'
            });
          })
        }, 1000)
      },
      editEntry() {
        this.user = {
          name: '',
          hospitalizationId: '',
          bed: "",
          project: ""
        }
        this.readonly = false
        this.show = true
      },
      submit() {
        this.readonly = true
        this.$notify({
          type: 'success',
          message: '已成功录入'
        });
      },
    }
  }
</script>
<style lang="less" scoped>
  .mb16 {
    margin-bottom: 16px;
  }

  .home_box {
    padding: 90px 16px 0;
    text-align: center;
  }

  .cell_group {
    padding-top: 80px;
    min-height: 620px;
    overflow: auto;
  }

  .footerBtn {
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
  }

  .avatar {
    padding: 100px 24px 48px;
    background: white;
    display: flex;
    margin-bottom: 90px;

    .imgBox {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #f0f0f0;
      margin-right: 24px;
    }

    .avatar_title {
      font-weight: bold;
    }
  }

  .iconColor {
    color: rgb(19, 181, 177);
  }

  .title_class {
    margin-left: 24px;
  }
</style>